<template>
  <div>
    <!-- 头部搜索 -->
    <div class="h-55 p-10 flex a-center sticky top-0 z-index-10 bg-white">
      <van-icon @click="$router.go(-1)" class="text-red" name="arrow-left" />
      <router-link tag="div" :to="{path: '/search', query: {type: 'goods'}}" class="flex-1 m-l-10">
        <VSearch :content="searchValue || '搜索商品'"></VSearch>
      </router-link>
    </div>
    <!-- 有商品分类显示 -->
    <van-tabs v-if="types.length" @change="handleTypeChange" v-model="tabsIndex" swipeable>
      <van-tab v-for="item in types" :title="item.name" :key="item.id">
        <div v-if="list.length">
          <van-skeleton avatar :row="4" avatar-size="80" avatar-shape="square" :loading="!ready">
            <van-list
              v-model="listControl.loading"
              :finished="listControl.pages === 0 || listPage.current === listControl.pages"
              finished-text="没有更多了"
              @load="getMoreData()"
              :immediate-check="false"
            >
              <goods-list :list="list" @changeGoodsStatus="changeGoodsStatus"></goods-list>
            </van-list>
          </van-skeleton>
        </div>
        <div v-if="!list.length && ready">
          <empty-data class="text-center m-t-20" content="没有搜索到附近的商品"></empty-data>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 没有分类，直接搜索商品 -->
    <div v-if="!this.types.length">
      <van-skeleton avatar :row="4" avatar-size="80" avatar-shape="square" :loading="!ready">
        <van-list
          v-model="listControl.loading"
          :finished="listControl.pages === 0 || listPage.current === listControl.pages"
          finished-text="没有更多了"
          @load="getMoreData()"
          :immediate-check="false"
        >
          <goods-list :list="list" @changeGoodsStatus="changeGoodsStatus"></goods-list>
        </van-list>
      </van-skeleton>
    </div>
    <div v-if="!list.length && ready && !this.types.length">
      <empty-data class="text-center m-t-20" content="没有搜索到附近的商品"></empty-data>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/images/merchant.jpg'
import VSearch from '@/components/VSearch'
import GoodsList from '@/views/Index/components/GoodsList'
export default {
  data () {
    return {
      ready: false,
      type: '',
      typeName: '',
      childName: '',
      tabsIndex: 0,
      types: [],
      logo,
      searchValue: '',
      list: [],
      listPage: {
        size: 10,
        current: 1
      },
      listControl: {
        pages: null,
        loading: false
      }
    }
  },
  components: {
    VSearch,
    GoodsList
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.getVal()
      await this.getTypes()
      if (this.childName) {
        await this.getChildNameGoods()
      } else {
        await this.getGoods()
        this.ready = true
      }
    },
    async getChildNameGoods () {
      if (this.childName) {
        let type = this.types.find(d => d.name === this.childName)
        let index = this.types.indexOf(type)
        this.handleTypeChange(index)
      }
    },
    async handleTypeChange (item) {
      this.ready = false
      this.tabsIndex = item
      this.typeName = this.types[item].name
      this.list = []
      await this.getGoods()
      this.ready = true
    },
    changeGoodsStatus ({ id }) {
      this.list.forEach(d => {
        if (d.id === id) {
          d.hasGetDiscounts = true
        }
      })
    },
    async getTypes () {
      if (this.type) {
        let { zxGdTypeList } = await this.$api.post('/gd/type/query', {})
        this.types = zxGdTypeList.filter(d => d.type === this.type && d.parentId !== '0')
        if (!this.types.length) {
          this.types = zxGdTypeList.filter(d => d.type === this.type && d.parentId === '0')
        }
        this.typeName = this.types[0].name
      }
    },
    getMoreData () {
      // 分页查询附近商家
      this.listPage.current++
      this.getGoods()
    },
    async getGoods () {
      this.listControl.loading = true
      let postData = {
        lat: 113.721678,
        lng: 34.73944,
        size: 10,
        current: this.listPage.current,
        area: '郑州市',
        name: this.searchValue
      }
      if (this.typeName) {
        postData.type = this.typeName
      }
      let { page } = await this.$api.post('/zxGd/queryByGtype', postData)
      page.records.forEach(d => {
        d.hasGetDiscounts = false
      })
      this.listControl.pages = page.pages
      this.listControl.loading = false
      this.list = [...this.list, ...page.records]
    },
    getVal () {
      let { val, type, typeName, childName } = this.$route.query
      this.type = type || ''
      this.typeName = typeName || ''
      this.searchValue = val || ''
      this.childName = childName || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  align-self: flex-start;
}
.btn {
  &:active {
    background: #dea448;
  }
}
@media screen and(max-width: 320px) {
  .item-img {
    width: 50px;
  }
}
</style>
